<template>
  <div class="lease-orders-container">
    <div class="page-header">
      <div class="header-content">
        <h2 class="title">租赁订单管理</h2>
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/official' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: 'LeaseManagement' }">租赁管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>

    <div class="main-content">
      <!-- 订单统计卡片 -->
      <el-row :gutter="20" class="stat-cards">
        <el-col :xs="12" :sm="6" :md="6" :lg="4">
          <div class="stat-card">
            <div class="stat-icon">
              <i class="el-icon-s-order"></i>
            </div>
            <div class="stat-info">
              <div class="stat-label">全部订单</div>
              <div class="stat-value">{{ orderStats.total }}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="6" :lg="4">
          <div class="stat-card pending">
            <div class="stat-icon">
              <i class="el-icon-s-claim"></i>
            </div>
            <div class="stat-info">
              <div class="stat-label">待审核</div>
              <div class="stat-value">{{ orderStats.pending }}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="6" :lg="4">
          <div class="stat-card processing">
            <div class="stat-icon">
              <i class="el-icon-loading"></i>
            </div>
            <div class="stat-info">
              <div class="stat-label">进行中</div>
              <div class="stat-value">{{ orderStats.processing }}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="6" :lg="4">
          <div class="stat-card completed">
            <div class="stat-icon">
              <i class="el-icon-circle-check"></i>
            </div>
            <div class="stat-info">
              <div class="stat-label">已完成</div>
              <div class="stat-value">{{ orderStats.completed }}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="6" :lg="4">
          <div class="stat-card cancelled">
            <div class="stat-icon">
              <i class="el-icon-circle-close"></i>
            </div>
            <div class="stat-info">
              <div class="stat-label">已取消</div>
              <div class="stat-value">{{ orderStats.cancelled }}</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="6" :lg="4">
          <div class="stat-card overdue">
            <div class="stat-icon">
              <i class="el-icon-warning"></i>
            </div>
            <div class="stat-info">
              <div class="stat-label">已逾期</div>
              <div class="stat-value">{{ orderStats.overdue }}</div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 搜索和过滤 -->
      <el-card class="filter-card">
        <el-form :inline="true" :model="searchForm" ref="searchForm" size="small">
          <el-form-item label="订单编号">
            <el-input v-model="searchForm.orderNo" placeholder="请输入订单编号" clearable></el-input>
          </el-form-item>
          <el-form-item label="设备名称">
            <el-input v-model="searchForm.equipmentName" placeholder="请输入设备名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 130px;">
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              style="width: 240px;">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 订单列表 -->
      <el-card class="order-list-card">
        <div slot="header" class="card-header">
          <span>订单列表</span>
          <el-radio-group v-model="currentStatus" size="small" @change="handleStatusChange">
            <el-radio-button label="">全部</el-radio-button>
            <el-radio-button label="pending">待审核</el-radio-button>
            <el-radio-button label="processing">进行中</el-radio-button>
            <el-radio-button label="completed">已完成</el-radio-button>
            <el-radio-button label="cancelled">已取消</el-radio-button>
            <el-radio-button label="overdue">已逾期</el-radio-button>
          </el-radio-group>
        </div>

        <el-table
          :data="orderList"
          style="width: 100%"
          v-loading="loading"
          border
          stripe
          row-key="id">
          <el-table-column prop="orderNo" label="订单编号" width="180" fixed></el-table-column>
          <el-table-column prop="equipmentName" label="设备名称" min-width="180"></el-table-column>
          <el-table-column prop="quantity" label="数量" width="80" align="center"></el-table-column>
          <el-table-column prop="rentDays" label="租期(天)" width="100" align="center"></el-table-column>
          <el-table-column prop="startDate" label="起租日期" width="120" align="center"></el-table-column>
          <el-table-column prop="endDate" label="到期日期" width="120" align="center"></el-table-column>
          <el-table-column prop="totalAmount" label="总金额" width="120" align="right">
            <template slot-scope="scope">
              <span>¥{{ scope.row.totalAmount.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="下单时间" width="170" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template slot-scope="scope">
              <el-tag :type="getStatusType(scope.row.status)">{{ getStatusLabel(scope.row.status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="viewOrderDetail(scope.row)">查看</el-button>
              <el-button 
                v-if="scope.row.status === 'processing'"
                size="mini" 
                type="success" 
                @click="returnEquipment(scope.row)">归还</el-button>
              <el-button 
                v-if="scope.row.status === 'pending'"
                size="mini" 
                type="danger" 
                @click="cancelOrder(scope.row)">取消</el-button>
              <el-button 
                v-if="['completed', 'cancelled'].includes(scope.row.status)"
                size="mini" 
                type="info" 
                @click="deleteOrder(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
          </el-pagination>
        </div>
      </el-card>
    </div>

    <!-- 订单详情弹窗 -->
    <el-dialog title="订单详情" :visible.sync="detailDialogVisible" width="70%" :close-on-click-modal="false">
      <div v-if="currentOrder" class="order-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="订单编号">{{ currentOrder.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{ currentOrder.createTime }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <el-tag :type="getStatusType(currentOrder.status)">{{ getStatusLabel(currentOrder.status) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="支付状态">
            <el-tag :type="currentOrder.isPaid ? 'success' : 'danger'">
              {{ currentOrder.isPaid ? '已支付' : '未支付' }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>

        <div class="detail-section">
          <h3 class="section-title">租赁信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="设备名称">{{ currentOrder.equipmentName }}</el-descriptions-item>
            <el-descriptions-item label="设备类别">{{ currentOrder.equipmentCategory }}</el-descriptions-item>
            <el-descriptions-item label="租赁数量">{{ currentOrder.quantity }}台</el-descriptions-item>
            <el-descriptions-item label="租赁天数">{{ currentOrder.rentDays }}天</el-descriptions-item>
            <el-descriptions-item label="起租日期">{{ currentOrder.startDate }}</el-descriptions-item>
            <el-descriptions-item label="到期日期">{{ currentOrder.endDate }}</el-descriptions-item>
            <el-descriptions-item label="日租金">¥{{ currentOrder.dailyPrice.toFixed(2) }}</el-descriptions-item>
            <el-descriptions-item label="押金">¥{{ currentOrder.deposit.toFixed(2) }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="detail-section">
          <h3 class="section-title">费用信息</h3>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="租金总计">¥{{ (currentOrder.dailyPrice * currentOrder.quantity * currentOrder.rentDays).toFixed(2) }}</el-descriptions-item>
            <el-descriptions-item label="押金总计">¥{{ (currentOrder.deposit * currentOrder.quantity).toFixed(2) }}</el-descriptions-item>
            <el-descriptions-item label="其他费用">¥{{ currentOrder.otherFee ? currentOrder.otherFee.toFixed(2) : '0.00' }}</el-descriptions-item>
            <el-descriptions-item label="总金额">
              <span class="total-amount">¥{{ currentOrder.totalAmount.toFixed(2) }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="detail-section">
          <h3 class="section-title">联系信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="联系人">{{ currentOrder.contactName || '未提供' }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ currentOrder.contactPhone || '未提供' }}</el-descriptions-item>
            <el-descriptions-item label="备注">{{ currentOrder.remark || '无' }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="detail-section">
          <h3 class="section-title">操作记录</h3>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in currentOrder.activities"
              :key="index"
              :timestamp="activity.time"
              :type="activity.type"
              :color="getActivityColor(activity.type)"
              :size="activity.important ? 'large' : 'normal'">
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </div>

        <div class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button 
            v-if="currentOrder.status === 'processing'"
            type="success" 
            @click="returnEquipment(currentOrder)">归还设备</el-button>
          <el-button 
            v-if="currentOrder.status === 'pending'"
            type="danger" 
            @click="cancelOrder(currentOrder)">取消订单</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 归还设备弹窗 -->
    <el-dialog title="归还设备" :visible.sync="returnDialogVisible" width="500px">
      <el-form :model="returnForm" :rules="returnRules" ref="returnForm" label-width="100px">
        <el-form-item label="归还日期" prop="returnDate">
          <el-date-picker v-model="returnForm.returnDate" type="date" placeholder="选择归还日期" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="设备状态" prop="condition">
          <el-select v-model="returnForm.condition" placeholder="请选择设备状态" style="width: 100%;">
            <el-option label="完好" value="good"></el-option>
            <el-option label="轻微损坏" value="minor_damage"></el-option>
            <el-option label="严重损坏" value="severe_damage"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="损坏描述" v-if="returnForm.condition !== 'good'" prop="damageDesc">
          <el-input type="textarea" v-model="returnForm.damageDesc" rows="3" placeholder="请描述损坏情况"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="returnForm.remark" rows="3" placeholder="请输入备注信息"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="returnDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmReturn('returnForm')">确认归还</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'LeaseOrders',
  data() {
    return {
      loading: false,
      orderStats: {
        total: 58,
        pending: 12,
        processing: 28,
        completed: 15,
        cancelled: 3,
        overdue: 0
      },
      searchForm: {
        orderNo: '',
        equipmentName: '',
        status: '',
        dateRange: []
      },
      statusOptions: [
        { value: 'pending', label: '待审核' },
        { value: 'processing', label: '进行中' },
        { value: 'completed', label: '已完成' },
        { value: 'cancelled', label: '已取消' },
        { value: 'overdue', label: '已逾期' }
      ],
      currentStatus: '',
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 58
      },
      orderList: [],
      detailDialogVisible: false,
      returnDialogVisible: false,
      currentOrder: null,
      returnForm: {
        returnDate: new Date(),
        condition: 'good',
        damageDesc: '',
        remark: ''
      },
      returnRules: {
        returnDate: [
          { required: true, message: '请选择归还日期', trigger: 'change' }
        ],
        condition: [
          { required: true, message: '请选择设备状态', trigger: 'change' }
        ],
        damageDesc: [
          { required: true, message: '请描述损坏情况', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.loadOrderList();
  },
  methods: {
    // 加载订单列表数据
    loadOrderList() {
      this.loading = true;
      // 模拟API请求获取数据
      setTimeout(() => {
        this.orderList = [
          {
            id: 1,
            orderNo: 'LO20230610001',
            equipmentName: '大型挖掘机XC-300',
            equipmentCategory: '工程机械',
            quantity: 1,
            rentDays: 15,
            dailyPrice: 2800,
            deposit: 20000,
            totalAmount: 62000,
            startDate: '2023-06-12',
            endDate: '2023-06-27',
            createTime: '2023-06-10 14:23:45',
            status: 'processing',
            isPaid: true,
            contactName: '张三',
            contactPhone: '13800138000',
            remark: '需要配备专业操作人员',
            otherFee: 0,
            activities: [
              { time: '2023-06-10 14:23:45', type: 'primary', content: '订单创建', important: true },
              { time: '2023-06-10 14:25:12', type: 'success', content: '支付完成', important: true },
              { time: '2023-06-11 09:15:30', type: 'info', content: '订单审核通过' },
              { time: '2023-06-12 08:30:00', type: 'warning', content: '设备出库' }
            ]
          },
          {
            id: 2,
            orderNo: 'LO20230605002',
            equipmentName: '工业级3D打印机P-500',
            equipmentCategory: '生产设备',
            quantity: 2,
            rentDays: 30,
            dailyPrice: 1500,
            deposit: 15000,
            totalAmount: 120000,
            startDate: '2023-06-07',
            endDate: '2023-07-07',
            createTime: '2023-06-05 10:12:36',
            status: 'processing',
            isPaid: true,
            contactName: '李四',
            contactPhone: '13900139000',
            remark: '',
            otherFee: 0,
            activities: [
              { time: '2023-06-05 10:12:36', type: 'primary', content: '订单创建', important: true },
              { time: '2023-06-05 10:30:22', type: 'success', content: '支付完成', important: true },
              { time: '2023-06-06 11:05:40', type: 'info', content: '订单审核通过' },
              { time: '2023-06-07 09:15:00', type: 'warning', content: '设备出库' }
            ]
          },
          {
            id: 3,
            orderNo: 'LO20230608003',
            equipmentName: '小型叉车DC-25',
            equipmentCategory: '运输设备',
            quantity: 3,
            rentDays: 7,
            dailyPrice: 500,
            deposit: 4000,
            totalAmount: 22500,
            startDate: '2023-06-15',
            endDate: '2023-06-22',
            createTime: '2023-06-08 16:45:10',
            status: 'pending',
            isPaid: true,
            contactName: '王五',
            contactPhone: '13700137000',
            remark: '需要送货上门',
            otherFee: 500,
            activities: [
              { time: '2023-06-08 16:45:10', type: 'primary', content: '订单创建', important: true },
              { time: '2023-06-08 16:50:35', type: 'success', content: '支付完成', important: true }
            ]
          },
          {
            id: 4,
            orderNo: 'LO20230601004',
            equipmentName: '激光切割机LC-1000',
            equipmentCategory: '生产设备',
            quantity: 1,
            rentDays: 10,
            dailyPrice: 2500,
            deposit: 30000,
            totalAmount: 55000,
            startDate: '2023-06-03',
            endDate: '2023-06-13',
            createTime: '2023-06-01 09:30:22',
            status: 'completed',
            isPaid: true,
            contactName: '赵六',
            contactPhone: '13600136000',
            remark: '',
            otherFee: 0,
            activities: [
              { time: '2023-06-01 09:30:22', type: 'primary', content: '订单创建', important: true },
              { time: '2023-06-01 09:35:45', type: 'success', content: '支付完成', important: true },
              { time: '2023-06-02 10:20:15', type: 'info', content: '订单审核通过' },
              { time: '2023-06-03 08:45:00', type: 'warning', content: '设备出库' },
              { time: '2023-06-13 17:30:00', type: 'success', content: '设备归还', important: true }
            ]
          },
          {
            id: 5,
            orderNo: 'LO20230604005',
            equipmentName: '大型农用收割机H-100',
            equipmentCategory: '农业机械',
            quantity: 1,
            rentDays: 5,
            dailyPrice: 2000,
            deposit: 18000,
            totalAmount: 28000,
            startDate: '2023-06-05',
            endDate: '2023-06-10',
            createTime: '2023-06-04 14:10:05',
            status: 'cancelled',
            isPaid: false,
            contactName: '孙七',
            contactPhone: '13500135000',
            remark: '',
            otherFee: 0,
            activities: [
              { time: '2023-06-04 14:10:05', type: 'primary', content: '订单创建', important: true },
              { time: '2023-06-04 15:30:22', type: 'danger', content: '订单取消', important: true }
            ]
          }
        ];
        this.loading = false;
      }, 500);
    },
    // 处理搜索
    handleSearch() {
      this.loadOrderList();
      this.$message.success('搜索条件已应用');
    },
    // 重置搜索条件
    resetSearch() {
      this.$refs.searchForm.resetFields();
      this.loadOrderList();
    },
    // 状态筛选变化
    handleStatusChange(status) {
      this.loadOrderList();
    },
    // 分页大小变化
    handleSizeChange(size) {
      this.pagination.pageSize = size;
      this.loadOrderList();
    },
    // 页码变化
    handleCurrentChange(page) {
      this.pagination.currentPage = page;
      this.loadOrderList();
    },
    // 查看订单详情
    viewOrderDetail(order) {
      this.currentOrder = order;
      this.detailDialogVisible = true;
    },
    // 归还设备
    returnEquipment(order) {
      this.currentOrder = order;
      this.returnForm = {
        returnDate: new Date(),
        condition: 'good',
        damageDesc: '',
        remark: ''
      };
      this.returnDialogVisible = true;
    },
    // 确认归还
    confirmReturn(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message.success('设备归还成功');
          this.returnDialogVisible = false;
          // 更新订单状态
          if (this.currentOrder) {
            this.currentOrder.status = 'completed';
            // 更新订单列表中的状态
            const index = this.orderList.findIndex(item => item.id === this.currentOrder.id);
            if (index !== -1) {
              this.$set(this.orderList, index, {
                ...this.orderList[index],
                status: 'completed'
              });
            }
          }
        } else {
          return false;
        }
      });
    },
    // 取消订单
    cancelOrder(order) {
      this.$confirm('确认取消该订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 更新订单状态
        if (order) {
          order.status = 'cancelled';
          // 更新订单列表中的状态
          const index = this.orderList.findIndex(item => item.id === order.id);
          if (index !== -1) {
            this.$set(this.orderList, index, {
              ...this.orderList[index],
              status: 'cancelled'
            });
          }
          this.$message.success('订单已取消');
          if (this.detailDialogVisible) {
            this.detailDialogVisible = false;
          }
        }
      }).catch(() => {});
    },
    // 删除订单
    deleteOrder(order) {
      this.$confirm('确认删除该订单记录吗? 删除后无法恢复', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        // 从列表中移除订单
        const index = this.orderList.findIndex(item => item.id === order.id);
        if (index !== -1) {
          this.orderList.splice(index, 1);
          this.$message.success('订单已删除');
        }
      }).catch(() => {});
    },
    // 获取状态标签
    getStatusLabel(status) {
      const statusMap = {
        'pending': '待审核',
        'processing': '进行中',
        'completed': '已完成',
        'cancelled': '已取消',
        'overdue': '已逾期'
      };
      return statusMap[status] || status;
    },
    // 获取状态类型
    getStatusType(status) {
      const typeMap = {
        'pending': 'warning',
        'processing': 'primary',
        'completed': 'success',
        'cancelled': 'info',
        'overdue': 'danger'
      };
      return typeMap[status] || '';
    },
    // 获取操作记录颜色
    getActivityColor(type) {
      const colorMap = {
        'primary': '#409EFF',
        'success': '#67C23A',
        'warning': '#E6A23C',
        'danger': '#F56C6C',
        'info': '#909399'
      };
      return colorMap[type] || '';
    }
  }
}
</script>

<style scoped lang="scss">
.lease-orders-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);

  .page-header {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .header-content {
      .title {
        font-size: 22px;
        color: #303133;
        margin: 0 0 10px 0;
      }
    }
  }

  .main-content {
    .stat-cards {
      margin-bottom: 20px;

      .stat-card {
        height: 80px;
        background-color: #fff;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

        &.pending {
          border-left: 4px solid #E6A23C;
        }

        &.processing {
          border-left: 4px solid #409EFF;
        }

        &.completed {
          border-left: 4px solid #67C23A;
        }

        &.cancelled {
          border-left: 4px solid #909399;
        }

        &.overdue {
          border-left: 4px solid #F56C6C;
        }

        .stat-icon {
          width: 50px;
          height: 50px;
          border-radius: 8px;
          background-color: #ecf5ff;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 15px;

          i {
            font-size: 24px;
            color: #409EFF;
          }
        }

        .stat-info {
          flex: 1;

          .stat-label {
            font-size: 14px;
            color: #606266;
            margin-bottom: 5px;
          }

          .stat-value {
            font-size: 20px;
            font-weight: bold;
            color: #303133;
          }
        }
      }
    }

    .filter-card, .order-list-card {
      margin-bottom: 20px;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .pagination-container {
      margin-top: 20px;
      text-align: right;
    }
  }

  .order-detail {
    .detail-section {
      margin-top: 20px;

      .section-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 15px;
        color: #303133;
        padding-left: 10px;
        border-left: 3px solid #409EFF;
      }
    }

    .total-amount {
      font-size: 18px;
      font-weight: bold;
      color: #F56C6C;
    }

    .dialog-footer {
      margin-top: 30px;
      text-align: right;
    }
  }
}

@media screen and (max-width: 768px) {
  .lease-orders-container {
    padding: 10px;

    .page-header {
      padding: 15px;
    }
  }
}
</style> 